// Blues
$blue: #4895d9; // old blue: #6da3d3
$blue-lightest: lighten($blue, 33%);
$blue-light: lighten($blue, 20%);

$blue-active-highlight: lighten($blue, 10%);

// Grays
$gray: #899199;

$gray-lightest: lighten($gray, 38%);
$gray-darkest: darken($gray, 38%);

// $gray color functions from light to dark:
//
// lighten($gray, 30%)
// lighten($gray, 20%)
// lighten($gray, 10%)
// darken($gray, 10%)
// darken($gray, 20%)
// darken($gray, 30%)

// Secondary
$yellow: #f0b849;
$red: #d94f4f;
$green: #4ab866;
$black: #000; // use $gray-darkest instead
$white: #fff;

$sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen-Sans',
  'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
$normal: 400;
$bold: 600;
$light: 300;

$anim-transition: all 200ms ease-in-out;
$anim-fast: all 0.1s ease-in-out;
$anim: all 0.2s ease-in-out;

$fade-alpha: 0.25;

$border-radius: 3px;

$focus-outline: 4px auto lighten($blue, 15%);

// Global Measurements
$navigation-bar-width: 216px;
$note-info-width: 268px;
$max-content-width: 625px;
$toolbar-height: 56px;

// z-index values
$z-index-dialogs: 1000;

// Viewport widths for media queries
$single-column: 750px;
$medium: 900px;
